<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 <style>
.c {margin :1px;width:19px;height:19px;background:red;position:absolute;}
.d {margin :1px;width:19px;height:19px;background:gray;position:absolute;}
.f {top:0px;left:0px;background:black;position:absolute;}

.bar{margin :1px;width:19px;height:19px;background:gray;position:absolute;}
.ball{margin :1px;width:3px;height:3px;background:red;position:absolute;}

</style>
 <body>
  <script type="text/javascript">
  <!--
	function createElem(tagname,css){
	   var elemobj=document.createElement(tagname);
	   elemobj.className=css;
	   document.body.appendChild(elemobj);
	   return elemobj;
	}

  function boundary(width,height){
    this.width=width?witch:500;
	this.height=height?heigth:300;
  
  }

   function orizontalBar(){
    this.width=width?width:60;
	this.height=height?height:5;
	this.boundary={};
	this.divs=createElem('div','bar');
	this.leftpostion=leftposition?leftpostion:(this.boundary.width/2-this.width/2);
	this.fresh=function(){
	    
		this.divs.style.left=this.leftposition;
	}
    this.check(){
	  this.leftposition<=0||(this.leftposition+this.width)>=this.boundary.width?return false:return true;
	
	}

	this.leftmove=function(){
	  if(this.check())
	      this.leftposition--;
	}
	this.rightmove=function(){
	  if(this.check()) 
	      this.leftposition++;
	}
    
   }
   //create the ball ,make sure the ball can be reflected once collision

   function Ball(){
     this.ballBody=createElem('div','ball');
     this.left=left?left:250;
	 this.top=top?top:4;
	 
	 this.move=function(){
	  // it will move in a specific line 
	  this.left+=1;
	  this.top+=
	 }
   this.Yoffset=1;
   this.Xoffset=1;
   this.check=function(){
         
      
      }
   
   }



  //-->
  </script>
 </body>
</html>
